import React, { Component } from 'react'
import HeaderBar from 'components/headerbar/HeaderBar'
import { SearchBar, Icon, ListView,Toast } from 'antd-mobile'
import "./List.style.scss"
import { get } from 'api/http'
import styled from 'styled-components'

const Burdens = styled.p`
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
`



export default class List extends Component {

  constructor() {
    super();
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
    });
    this.state = {
      //起始的索引值
      start: 0,
      //每页数据条数
      limit: 10,
      value: '',
      datalist: [],
      dataSource,
      isLoading: true
    }
    this.hasMore = true;

  }

  onChange = (val) => {
    this.setState({
      start:0,
      datalist: [],
      value: val
    },()=>{
      this.getList()
    })
  }

  render() {



    const row = (rowData, sectionID, rowID) => {
      console.log(rowData)
      return (
        <div className="item">
          <div className="photo">
            <img src={rowData.img} alt="" />
          </div>
          <div className="content">
            <h1>{rowData.name}</h1>
            <Burdens>{rowData.burdens}</Burdens>
            <p>{rowData.all_click}浏览 {rowData.favorites}收藏</p>
          </div>
        </div>
      )
    }

    return (
      <div className="listWrapper">
        <HeaderBar  >
          <Icon onClick={() => {
            this.props.history.go(-1);
          }} type='left' />
          <SearchBar className="searhBar"
            value={this.state.value}
            placeholder="Search"
            onSubmit={value => console.log(value, 'onSubmit')}
            onClear={value => console.log(value, 'onClear')}
            onFocus={() => console.log('onFocus')}
            onBlur={() => console.log('onBlur')}
            onCancel={() => console.log('onCancel')}
            onChange={this.onChange}
          />
          <span>搜索</span>
        </HeaderBar>

        <ListView
          ref={el => this.lv = el}
          dataSource={this.state.dataSource.cloneWithRows(this.state.datalist)}
          renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
            {this.state.isLoading ? '加载中...' : '加载完成'}
          </div>)}
          renderBodyComponent={() => <div className="listContainer" />}
          renderRow={row}
          style={{
            flex: 1
          }}
          pageSize={4}
          // scrollRenderAheadDistance={500}
          onEndReached={this.onEndReached}
          onEndReachedThreshold={10}
        />


      </div>




    )
  }

  onEndReached = () => {
    if (!this.hasMore) {
      Toast.info('没有更多的数据了', 1);
      return;
    }
    this.getList();
  }

  async getList() {
    this.setState({
      isLoading:true
    })
    let end = this.state.start + this.state.limit;
    let rs = await get('/api/list', {
      _start: this.state.start,
      _end: end,
      q:this.state.value
    })
    if (rs.data.length < this.state.limit) {
      this.hasMore = false;
    }
    this.setState({
      datalist: this.state.datalist.concat(rs.data),
      start: end,
      isLoading:false
    })
  }

  componentWillUnmount() {

  }

  componentDidMount() {
    this.getList();
  }
}
